<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=data-width, initial-scale=1.0">
		<title>设备信息表</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<style>
			table {
				width: 100%;
				border-collapse: collapse;
			}
			th, td {
				border: 1px solid #ddd;
				padding: 8px;
				text-align: left;
			}
			th {
				background-color: #C0C0C0;
			}
			tr:nth-child(even) {
				background-color: #f9f9f9;
			}
			.animal-img {
				max-width: 100px;
				max-height: 100px;
			}
			.pagination {
				margin-top: 20px;
				text-align: center;
			}
			.pagination button {
				margin: 0 5px;
				padding: 5px 10px;
			}
		</style>
	</head>
	<!--data_id
data_name
data_value
publish_time
device_id

	-->
	<body>
		<div id="app">
			<table id="animalTable">
				<thead>
					<tr>
						<th>data_id</th>
						<th>data_name</th>
						<th>data_value</th>
						<th>publish_time</th>
						<th>device_id</th>
					</tr>
				</thead>
				<tbody>
					<!-- 数据将通过JavaScript动态插入 -->
				</tbody>
			</table>
		
			<div class="pagination">
				<button id="prevPage">上一页</button>
				<button id="nextPage">下一页</button>
			</div>
		</div>
		
		<script src="js/vue.js" type="text/javascript"></script>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			let vm = new Vue({
				el:"#app",
				data:{
				},
				methods:{
					
				}
			})
		</script>
		
		<script>
			// 假设这是你的动物数据数组
			const animals = [
				{ animal_id: 1, animal_name: '老虎', data_img: 'imgs/tiger.jpg', animal_remark: '体型强壮，凶猛', animal_type_id: 1, stadium_id: 1 },
				{ animal_id: 2, animal_name: '狮子', animal_img: 'imgs/lion.jpg', animal_remark: '草原之王，威风凛凛', animal_type_id: 1, stadium_id: 2 },
				{ animal_id: 3, animal_name: '大象', animal_img: 'imgs/elephant.jpg', animal_remark: '体型庞大，鼻子灵活', animal_type_id: 2, stadium_id: 3 },
				{ animal_id: 1, animal_name: '老虎', animal_img: 'imgs/tiger.jpg', animal_remark: '体型强壮，凶猛', animal_type_id: 1, stadium_id: 1 },
				{ animal_id: 2, animal_name: '狮子', animal_img: 'imgs/lion.jpg', animal_remark: '草原之王，威风凛凛', animal_type_id: 1, stadium_id: 2 },
				{ animal_id: 3, animal_name: '大象', animal_img: 'imgs/elephant.jpg', animal_remark: '体型庞大，鼻子灵活', animal_type_id: 2, stadium_id: 3 },
				{ animal_id: 1, animal_name: '老虎', animal_img: 'imgs/tiger.jpg', animal_remark: '体型强壮，凶猛', animal_type_id: 1, stadium_id: 1 },
				{ animal_id: 2, animal_name: '狮子', animal_img: 'imgs/lion.jpg', animal_remark: '草原之王，威风凛凛', animal_type_id: 1, stadium_id: 2 },
				{ animal_id: 3, animal_name: '大象', animal_img: 'imgs/elephant.jpg', animal_remark: '体型庞大，鼻子灵活', animal_type_id: 2, stadium_id: 3 },
				// 更多数据...
			];

			const itemsPerPage = 4; // 每页显示的项目数
			let currentPage = 1; // 当前页码

			function displayPage(page) {
				const start = (page - 1) * itemsPerPage;
				const end = start + itemsPerPage;
				const pageItems = animals.slice(start, end);

				const tableBody = document.querySelector('#animalTable tbody');
				tableBody.innerHTML = ''; // 清空表格内容

				pageItems.forEach(item => {
					const row = document.createElement('tr');
					row.innerHTML = `
						<td>${item.data_id}</td>
						<td>${item.data_name}</td>
						<td>${item.data_value}</td>
						<td>${item.publish_time}</td>
						<td>${item.device_id}</td>
					`;
					tableBody.appendChild(row);
				});
			}

			document.getElementById('prevPage').addEventListener('click', () => {
				if (currentPage > 1) {
					currentPage--;
					displayPage(currentPage);
				}
			});

			document.getElementById('nextPage').addEventListener('click', () => {
				if (currentPage < Math.ceil(animals.length / itemsPerPage)) {
					currentPage++;
					displayPage(currentPage);
				}
			});

			// 初始化显示第一页
			displayPage(currentPage);
		</script>
	</body>
</html>